<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全景</title>
</head>

<body>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
  <div id="viewer"></div>
  <style>
    /* 定义容器大小 */
    * {
      margin: 0;
      padding: 0;
    }
    #viewer {
      width: 100vw;
      height: 100vh;
    }
    .psv-navbar {
      bottom: 60px !important;
      background: none !important;
      display: flex;
      justify-content: space-between;
    }
    .psv-button {
      float: right;
    }
    .psv-button--active {
      background: rgba(255, 255, 255, .2);
      border-radius: 10%;
    }
    .psv-zoom-button {
      display: block !important;
    }
    .but {
      color: #fff;
      opacity: 0;
      width: auto;
      background: rgba(5, 5, 5, 0.3);
      border-radius: 10px;
    }
  </style>

  <script>
    var url = decodeURI(decodeURI(window.location.search)); //获取url中"?"符后的字串，使用了两次decodeRUI解码
    url = url.slice(5)
    console.log(url);
    var viewer = new PhotoSphereViewer.Viewer({
      container: document.querySelector('#viewer'),
      panorama: url,
      navbar: [
        {
          id: 'my-button',
          content: '滑动屏幕可查看四周环境',
          title: '滑动屏幕可查看四周环境',
          className: 'but',
        },
        'autorotate',
        // 'zoom',//缩放器
      ],
      loadingTxt: '加载中...',
      autorotateDelay: 4000,
      autorotateSpeed: '1rpm', //自动旋转速度
      moveSpeed:0.8
    });
    let time_one = true
    viewer.on('ready', (e, data) => {   //加载完成
      const but = document.getElementsByClassName('but')[0]
      let index = 0
      let Timing = setInterval(() => {
        but.style.opacity = index * 0.1
        but.style.marginLeft = index * 2 + 'px'
        index += 0.5
        if (index > 10) {
          clearInterval(Timing)
        }
      }, 30);
    })
    viewer.on('position-updated', (e, position) => { //视图变动时触发
      if (time_one) {
        time_one = false
        const but = document.getElementsByClassName('but')[0]
        const nav = document.getElementsByClassName('psv-navbar')[0]
        let index = 11
        let index2 = 1
        let Timing2 = setInterval(() => {
          but.style.opacity = index2
          but.style.marginLeft = index * 2 + 'px'
          index += 1
          index2 -= 0.04
          if (index > 50) {
            clearInterval(Timing2)
            nav.style.justifyContent = 'flex-end';
            but.style.display = 'none'
          }
        }, 20);
      }
    });
  </script>
</body>
</html>